<template>
    <div>
        <h1>优惠券添加</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>优惠卷类型</td>
                    <td>
                        <select v-model="queryInfo.disType">
                            <option value="">请选择</option>            
                            <option :value=1>代金券</option>
                            <option :value=2>折扣卷</option>
                            <option :value=3>兑换券</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">优惠卷名称</td>
                    <td><input type="text" v-model="queryInfo.name"/></td>
                </tr>
                <tr>
                    <td align="right">优惠卷标题</td>
                    <td><input type="text"  v-model="queryInfo.tile"/></td>
                </tr>
                <tr>
                    <td align="right">优惠卷副标题</td>
                    <td><input type="text" v-model="queryInfo.fTile"/></td>
                </tr>
                <tr>
                    <td align="right">优惠卷图片</td>
                    <td>
                        <input  type="file" @change="getphoto"/>
                        <img :src="queryInfo.photo" alt="" width="100px" height="100px">
                    </td>
                </tr>
                <tr>
                    <td align="right">优惠卷库存</td>
                    <td><input type="text" v-model="queryInfo.count"/></td>
                </tr>
                <tr>
                    <td align="right">每人限领</td>
                    <td><input type="text" value="1" disabled  v-model="queryInfo.personCount"/></td>
                </tr>
                <tr>
                    <td align="right">使用条件</td>
                    <td><input type="text" v-model="queryInfo.money"/></td>
                </tr>
                <!--是代金券的时候才会显示-->
                <tr v-if="queryInfo.disType=='1'">
                    <td align="right">减免金额</td>
                    <td><input type="text" v-model="queryInfo.releaseMoney"/></td>
                </tr>
                <!--是折扣价的时候才会显示-->
                <tr v-if="queryInfo.disType=='2'">
                    <td align="right">折扣价</td>
                    <td><input type="text" v-model="queryInfo.zheKou"/></td>
                </tr>
                <tr>
                    <td align="right">有效期</td>
                    <td>
                        <input type="date" v-model="queryInfo.beginTime"/>--
                        <input type="date" v-model="queryInfo.endTime"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">使用业务</td>
                    <td>
                        <input type="checkbox" name="yewu" v-model="queryInfo.range" value="订房"/>订房
                        <input type="checkbox" name="yewu" v-model="queryInfo.range" value="商城"/>商城
                        <input type="checkbox" name="yewu" v-model="queryInfo.range" value="堂食"/>堂食
                        <input type="checkbox" name="yewu" v-model="queryInfo.range" value="收款码"/>收款码
                    </td>
                </tr>
                <tr>
                    <td align="right">使用须知</td>
                    <td>
                        <textarea clos="50" rows="5" v-model="queryInfo.desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">适用门店</td>
                    <td>
                        <select v-model="queryInfo.shopId">
                            <option value="">全部</option>
                            <option :value="item.id" v-for="item in data.list" :key="item.id">{{item.shopName}}</option>
                            
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">服务电话</td>
                    <td><input type="text"  v-model="queryInfo.phone"/></td>
                </tr>
                <tr>
                    <td align="right">状态</td>
                    <td>
                        <input type="radio" name=""  v-model="queryInfo.state" :value="1"/>是
                        <input type="radio" name="" v-model="queryInfo.state" :value="0"/>否
                    </td>
                </tr>
                <tr>
                    <td align="right">优惠卷颜色</td>
                    <td>
                        <input type="color" v-model="queryInfo.color" />
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="增加" @click="ok"  class="btn btn-primary" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import moment, { lang } from 'moment';
import { reactive,ref,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';
const router = useRouter();
const route = useRoute();
onMounted(()=>{
    getShopList();
})
//声明一个数据
let data:any = reactive({
    list:[]
})
let list=ref([]);
const getShopList=()=>{
    axios({
        url:'/api/Shops/GetShopsList',
        method:'get',
        params:{
            toalsize:1000,
        }
    })
    .then((res)=>{
        console.log(res.data);
        data.list = res.data.list;
    })
}
//图片上传
const getphoto=(e:any)=>{
    console.log(e);
    let file = e.target.files[0];
    let formdata = new FormData();
    formdata.append('file',file);
    axios({
        url:'/api/Img/GetPhoto',
        method:'post',
        data:formdata
    })
    .then((res)=>{
        console.log(res);
        if(res.data == '不是图片'){
            alert('上传的不是图片');
            return;
        }
        else if(res.data == '大于2M'){
            alert('上传的图片大于2M');
            return;
        }
        queryInfo.photo = res.data;
    })
}
//添加优惠券赋值
let queryInfo=reactive({
   
  name: "",
  disType: '',
  tile: "",
  fTile: "",
  photo: "",
  count: "",
  personCount: 1,
  money: '',
  releaseMoney: 0,
  zheKou: 10,
  beginTime: "",
  endTime: "",
  range: [],
  desc: "",
  shopId: 0,
  phone: "",
  state: 1,
  color: "#ff0000",
})
const ok = () => {
    if(queryInfo.name == ''){
        alert('请输入优惠券名称');
        return;
    }
    if(queryInfo.fTile == ''){
        alert('请输入优惠券副标题');
        return;
    }
    if(queryInfo.count == ''){
        alert('请输入库存数量');
        return;
    }
    if(queryInfo.photo == ''){
        alert('请上传优惠券图片');
        return;
    }
    if(queryInfo.disType == ''){
        alert('请选择优惠券类型');
        return;
    }
    if(queryInfo.money == ''){
        alert('使用条件不能为空');
        return;
    }
    if(isNaN(Number(queryInfo.count))==true){
        alert('库存类型只能是数字');
        return;
    }
    if(queryInfo.disType=='1' && queryInfo.releaseMoney<0 && isNaN(Number(queryInfo.releaseMoney))==true){
        alert('满减金额不能为空且只能是>0的数字');
        return;
    }
    if(queryInfo.disType=='2' &&(queryInfo.zheKou<1 || queryInfo.zheKou>9.0)) 
    {
        alert('折扣类型只能是1-9.9之间的数字');
        return;
    }
    if(queryInfo.beginTime==''){
        alert('开始时间不能为空');
        return;
    }
    if(queryInfo.endTime==''){
        alert('结束时间不能为空');
        return;
    }
    if(queryInfo.range.length==0){
        alert('请选择优惠券范围');
        return;
    }
    if(queryInfo.desc.length>20){
        alert('优惠券描述不能超过20字');
        return;
    }
    if(queryInfo.phone==''){
        alert('请输入手机号');
        return;
    }
    let reg = /^1[3-9]\d{9}$/;
  if (reg.test(queryInfo.phone) == false) {
    alert('服务电话必须合法');
    return;
  }
  queryInfo.range=queryInfo.range.toString();
    axios({
        url:'/api/DisCount/DisCounAdd',
        method:'post',
        data:queryInfo
    })
    .then(res=>{
        if(res.data==1){
            alert('添加成功');
        }
        else if(res.data==-1){
            alert('相同类型标题已存在');
        }
        else{
            alert('添加失败');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>